import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { Chart, Geom, Axis, Tooltip, Coord, Legend, Label } from 'bizcharts';
import DataSet from '@antv/data-set'; // 第二栏第二项
import ContainerTitle from './ContainerTitle'; // 第二栏标题部分
import HotTagsChart from './HotTagsChart';
import {
  Total,
  LastTrend, OrderTrend, OrderSort,
  HotTags
} from './style';

import IceContainer from '@icedesign/container';
import { Grid, Table } from '@alifd/next';
import '@alifd/next/dist/next.css';


const { Row, Col } = Grid;

const STATUS = {
  '1': '#447eff',
  '0': '#ee706d',
};

const styles = {
  status: {
    position: 'relative',
    paddingLeft: '20px',
  },
  dot: {
    width: '10px',
    height: '10px',
    position: 'absolute',
    left: '0',
    top: '2px',
    borderRadius: '50%',
  },
};

class AdminDashboard extends PureComponent {
  renderProductStatus = (status) => {
    return (
      <div style={styles.status}>
        <span style={{ ...styles.dot, background: STATUS[status]}} />
        {status==='0'?'未完成':'已完成'}
      </div>
    );
  };

  render(){
    const { orderTrendData, orderSortData,
            totalDataAmount } = this.props;
    const orderTrendCols = {
      count: { tickInterval: 2, alias: '新增订单' },
    };

    const { DataView } = DataSet;
    const orderSortDv = new DataView();
    orderSortDv.source(orderSortData).transform({
      type: 'percent',
      field: 'percent',
      dimension: 'item',
      as: 'percent'
    });
    const orderSortCols = {
      percent: {
        formatter: (val) => {
          val = `${val * 100}%`;
          return val;
        },
      },
    };

    return(
      <Fragment>
        <Total>
        {/** 第一栏 start */}
          <Row gutter={5} style={{ marginBottom: '20px' }}>
            <Col span={6}>
              <IceContainer className="totalContainer">
                <div className="totalContent">
                  <p className="totalTitle">交易总额/币</p>
                  <div className="totalData">
                    <h2 className="totalAmount">{totalDataAmount.totalMoney}</h2>
                  </div>
                </div>
              </IceContainer>
            </Col>
            <Col span={6}>
              <IceContainer className="totalContainer">
                <div className="totalContent">
                  <p className="totalTitle">总订单数/单</p>
                  <div className="totalData">
                    <h2 className="totalAmount">{totalDataAmount.orderNum}</h2>
                  </div>
                </div>
              </IceContainer>
            </Col>
            <Col span={6}>
              <IceContainer className="totalContainer">
                <div className="totalContent">
                  <p className="totalTitle">会员数/人</p>
                  <div className="totalData">
                    <h2 className="totalAmount">{totalDataAmount.userNum}</h2>
                  </div>
                </div>
              </IceContainer>
            </Col>
            <Col span={6}>
              <IceContainer className="totalContainer">
                <div className="totalContent">
                  <p className="totalTitle">作品数/件</p>
                  <div className="totalData">
                    <h2 className="totalAmount">{totalDataAmount.workNum}</h2>
                  </div>
                </div>
              </IceContainer>
            </Col>
          </Row>
        {/** 第一栏 end */}
        </Total>
        <LastTrend className="clearfix">
          {/** 第二栏 start*/}
          <OrderTrend>
            {/** 新增交易趋势 */}
            <IceContainer style={{ padding: 0 }}>
              <ContainerTitle title="新增交易趋势" />
              <Chart
                height={300}
                forceFit
                padding={[60, 40]}
                data={orderTrendData}
                scale={orderTrendCols}
              >
                <Tooltip
                  crosshairs={{
                    type: 'y',
                  }}
                />
                <Axis />
                <Geom
                  type="area"
                  position="month*count"
                  color="#447eff"
                  shape="smooth"
                />
                <Geom
                  type="line"
                  position="month*count"
                  color="#447eff"
                  size={2}
                  shape="smooth"
                />
              </Chart>
            </IceContainer>
          </OrderTrend>
          <OrderSort>
            {/** 订单分类 */}
            <IceContainer style={{ padding: 0 }}>
              <ContainerTitle title="交易分类" />
              <Chart height={300} data={orderSortDv} scale={orderSortCols} padding={[40]} forceFit>
                <Coord type="theta" radius={0.75} innerRadius={0.6} />
                <Axis name="percent" />
                <Legend position="bottom" offsetY={-30} />
                <Tooltip
                  showTitle={false}
                  itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                />

                <Geom
                  type="intervalStack"
                  position="percent"
                  color="item"
                  tooltip={[
                    'item*percent',
                    (item, percent) => {
                      percent = `${percent * 100}%`;
                      return {
                        name: item,
                        value: percent,
                      };
                    },
                  ]}
                  style={{
                    lineWidth: 1,
                    stroke: '#fff',
                  }}
                />
              </Chart>
            </IceContainer>
          </OrderSort>
          {/** 第二栏 end*/}
        </LastTrend>
        <HotTags>
          {/** 第四栏 start*/}
          <HotTagsChart />
          {/** 第四栏 end*/}
        </HotTags>
      </Fragment>
    );
  }

  // 从后台获取数据http://localhost:9080/home/dashboard
  componentDidMount() {
    this.props.getAdminDashboardData();
  }
}

const mapState = (state) => ({
  totalDataAmount: state.AdminDashboard.get('totalDataAmount').toJS(),
  orderTrendData: state.AdminDashboard.get('orderTrendData').toJS(),
  orderSortData: state.AdminDashboard.get('orderSortData').toJS(),
});

const mapDispatch = (dispatch) => ({
  getAdminDashboardData() {
    dispatch(actionCreators.getAdminDashboardData());
  }
});

export default connect(mapState, mapDispatch)(AdminDashboard);